<template>
	<view class="project-list">
		<navBar title="项目列表"  @goBack="uni.navigateBack()"></navBar>

		<view class="search-content" :style="{marginTop: `${topHeight}`}">
			<u-search placeholder="请输入关键字"  v-model="searchForm.keyword" :showAction="false" @clear="search" :clearabled="false" @search="search" @change="search" height="44"></u-search>
			<view @click.stop="changeType" class="search-type">
				<text>{{ typeArray[searchForm.typeIndex].label }}</text>
				<u-icon name="arrow-down" color="#2f80ed" size="20"></u-icon>
			</view>
		</view>

		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height: `calc(100vh - 71px - ${extraHeight});`}">
			<view class="list-content">
				<view @click.stop="clickDataItem(item)" v-for="(item, index) in dataList" :key="index" class="list-item" :class="[item.pmState === 'zj' ? 'blue-item' : item.pmState === 'zt' ? 'orange-item' : item.pmState === 'wg' ? 'green-item' : '']">
					<view class="title-content">
						<view @click.stop="changeProjectStatus(item)" class="status-label">{{ item.pmState === 'zj' ? '在建': item.pmState === 'zt' ? '暂停' : item.pmState === 'wg' ? '完工' : '' }}</view>
						<view class="title">{{ item.name }}</view>
					</view>

					<view v-if="['zj', 'zt'].includes(item.pmState)" class="schedule-content">
						<view class="schedule">
							<view class="schedule-background" :style="{width: `${item.completionRateStr}%`}"></view>
						</view>
						<view class="percent">{{ item.completionRateStr }}%</view>
					</view>

					<view v-if="['zj', 'zt'].includes(item.pmState)" class="statistics">
						<view class="statistics-item">
							<view class="statistics-label">计划产值</view>
							<view class="statistics-num">{{ item.planGrossProductNew }}</view>
						</view>
						<view class="statistics-item">
							<view class="statistics-label">完成产值</view>
							<view class="statistics-num">{{ item.totalFinishGrossProduct }}</view>
						</view>
					</view>
					<view v-else class="date-tips">
						<view class="text-tips">完成时间：</view>
						<view class="text-date">{{ item.actualEndTime }}</view>
					</view>
				</view>
				<view v-if="!dataList.length" style="padding-bottom: 40px; min-height: 300px;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</view>
			</view>
		</scroll-view>

		<u-picker :show="pickerVisible" :columns="pickerColumns" @confirm="confirmPicker" @cancel="cancelPicker" keyName="label"></u-picker>
	</view>
</template>

<script>
	import { projectManagementGetListByLike } from "@/api/comprehensive/comprehensive.js"
	import { reserveDecimalPoint, getSystemHeightInfo } from "@/utils/common.js"
	import { handleFormatDate } from "@/utils/date.js"
	export default {
		data() {
			return {
				// 筛选表单
				searchForm: {
					keyword: '',
					typeIndex: 0
				},
				// 类型类别
				typeArray: [
					{ label: "在建", value: "zj" },
					{ label: "暂停", value: "zt" },
					{ label: "完工", value: "wg" },
					{ label: "全部", value: undefined },
				],
				// 选择器是否可见
				pickerVisible: false,
				// 选择器内容
				pickerColumns: [],
				// 分页
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0
				},
				// 列表数据
				dataList: [],
				// 尺寸信息
				systemHeightInfo: {}
			}
		},
		onLoad() {
			this.systemHeightInfo = getSystemHeightInfo()
		},
		onShow() {
			this.search()
		},
		computed: {
			// 顶部高度
			topHeight() {
				const { stateHeight, navbarHeight } = this.systemHeightInfo
				return `${(stateHeight + navbarHeight) || 0}px`
			},
			// 额外高度
			extraHeight() {
				const { stateHeight, bottomHeight, navbarHeight } = this.systemHeightInfo
				return `${(stateHeight + bottomHeight + navbarHeight) || 0}px`
			}
		},
		methods: {
			/** 搜索 */
			search() {
				this.paging.pageNum = 1
				this.dataList = []
				this.getDataList()
			},

			/** 改变类型 */
			changeType() {
				this.pickerColumns = [this.typeArray]
				this.pickerVisible = true
			},

			/** 关闭选择器 */
			cancelPicker() {
				this.pickerColumns = []
				this.pickerVisible = false
			},

			/** 确认选择器 */
			confirmPicker(event) {
				const { indexs } = event
				this.searchForm.typeIndex = indexs[0]
				this.cancelPicker()
				this.search()
			},

			/** 滚动到底部 */
			scrolltolower() {
				console.log(this.paging, 'paging');
				if (this.paging.pageNum * this.paging.pageSize >= this.paging.total) {
					return
				}
				this.paging.pageNum++
				this.getDataList()
			},

			/** 获取数据列表 */
			getDataList() {
				if (this.loading) {
					return
				}
				this.loading = true
				const { pageNum, pageSize } = this.paging
				const { keyword, typeIndex } = this.searchForm
				projectManagementGetListByLike({
					currPage: pageNum,
					pageSize,
					params: {
						pmStates: this.typeArray[typeIndex].value ? [this.typeArray[typeIndex].value] : undefined,
						keyword,
						projectId: uni.getStorageSync("isOwner")
					},
					projectId: uni.getStorageSync("isOwner")
				}).then(res => {
					if (res && res.result && res.result.list) {
						this.dataList = this.dataList.concat(res.result.list.map(item => ({
							...item,
							totalFinishGrossProduct: reserveDecimalPoint(item.totalFinishGrossProduct, 100000000, '99999999'),
							planGrossProductNew: reserveDecimalPoint(item.planGrossProductNew, 100000000, '99999999'),
							actualEndTime: handleFormatDate(new Date(item.actualEndTime)),
							completionRateStr: parseInt(parseInt(item.completionRate * 1000) / 10) || 0,
						})))
						this.paging.total = res.result.total
					}
				}).finally(() => {
					this.loading = false
				})
			},

			/** 改变工程状态 */
			changeProjectStatus(item) {
				let url = `/subpackage-overhaul/pages/comprehensiveOverhaul/projectKanBan/projectStatus?id=${item.id}&code=${item.pmState}`
				if (item.pmState === 'wg' && item.actualEndTime) {
					url += `&date=${JSON.stringify(handleFormatDate(new Date(item.actualEndTime)))}`
				}
				uni.navigateTo({ url })
				this.dataList = []
			},

			/** 点击某一项 */
			clickDataItem(item) {
				uni.navigateTo({ url: `/subpackage-overhaul/pages/comprehensiveOverhaul/projectKanBan/projectLoad?id=${item.id}&name=${JSON.stringify(item.name)}` })
				this.dataList = []
			}
		}
	}
</script>

<style scoped lang="scss">
	.project-list {
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 15px;
		background: #f5f7fa;
		font-size: 16px;
		.search-content {
			height: 71px;
			background: #fff;
			padding: 0 8px 0 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.search-type {
				margin-left: 6px;
				width: 100px;
				height: 44px;
				background: #f5f7fa;
				color: #2f80ed;
				font-family: PingFang;
				font-weight: bold;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 25px;
				text {
					margin-right: 10px;
				}
			}
		}
		.list-content {
			.list-item {
				padding: 18px 10px 12px 13px;
				background: #fff;
				margin-top: 10px;
				.title-content {
					display: flex;
					align-items: center;
					.status-label {
						font-family: PingFang;
						color: #fff;
						width: 48px;
						height: 23px;
						clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
						text-align: center;
						margin-right: 6px;
					}
					.title {
						font-size: 18px;
						color: #445469;
						font-family: PingFang;
						font-weight: bold;
						width: 296px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
				.schedule-content {
					padding: 12px 0 15px;
					line-height: 26px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.schedule {
						width: 302px;
						height: 14px;
						background: rgb(243, 246, 249);
						border-radius: 50px;
						.schedule-background {
							height: 100%;
							max-width: 100%;
							background-size: 14px 14px;;
							border-radius: 50px;
						}
					}
					.percent {
						color: #1890ff;
						font-family: DIN;
						font-size: 20px;
						font-weight: 500;
						margin-left: 9px;
					}
				}
				.statistics {
					height: 54px;
					display: flex;
					.statistics-item {
						display: flex;
						flex-direction: column;
						flex: 1;
						.statistics-label {
							font-size: 14px;
							line-height: 20px;
							color: #6a819e;
							font-family: PingFang;
							font-weight: bold;
							margin-bottom: 5px;
						}
						.statistics-num {
							color: #425166;
							font-family: DIN;
							font-size: 24px;
							line-height: 29px;
							font-weight: 500;
						}
					}
				}
				.date-tips {
					font-weight: bold;
					display: flex;
					align-items: center;
					margin-top: 15px;
					.text-tips {
						color: #6a819e;
						font-family: PingFang;
					}
					.text-date {
						color: #425166;
						font-family: PingFang;
					}
				}
				&.blue-item {
					.status-label {
						background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%) !important;
					}
					.schedule-background {
						background: linear-gradient(-65deg, #5295FE 36%, rgba(82, 149, 254, .5) 40%, rgba(82, 149, 254, .5) 55%, #5295FE 25%);
					}
				}
				&.orange-item {
					.status-label {
						background: linear-gradient(90deg, #FF882B 0%, #FF9F3D 100%) !important;
					}
					.schedule-background {
						background: linear-gradient(-65deg, #FF882B 36%, rgba(255, 136, 43, .5) 40%, rgba(255, 136, 43, .5) 55%, #FF882B 25%);
					}
				}
				&.green-item {
					.status-label {
						background: linear-gradient(90deg, #19C585 0%, #61C9A5 100%) !important;
					}
					.schedule-background {
						background: linear-gradient(-65deg, #19C585 36%, rgba(25, 197, 133, .5) 40%, rgba(25, 197, 133, .5) 55%, #19C585 25%);
					}
				}
			}
		}
	}
</style>
